<template>
  <div class="basic-page">
    <el-tabs
      v-model="activeName"
      class="h-full bg-white app-tabs pt-[6px]"
      @tab-change="handleChange"
    >
      <el-tab-pane label="节点列表" name="list">
        <NodeList ref="nodeList" />
      </el-tab-pane>
      <el-tab-pane label="节点分组" name="group">
        <NodeGroup ref="nodeGroup" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script lang="ts" setup>
import NodeList from './components/NodeLIst.vue'
import NodeGroup from './components/NodeGroup.vue'
import type { Strategies } from '@/types/common'
const activeName = ref('list')
const nodeList = ref()
const nodeGroup = ref()
const handleChange = () => {
  getDataSource()
}
const getDataSource = () => {
  const apiMap: Strategies<() => void> = {
    list: nodeList.value.getTableList,
    group: nodeGroup.value.getTableList
  }
  if (Object.prototype.hasOwnProperty.call(apiMap, activeName.value)) {
    apiMap[activeName.value]()
  }
}
onMounted(() => {
  // nodeList.value.getTableList()
  getDataSource()
})
</script>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper) {
  flex: 1;
}
:deep(.el-tabs__nav-wrap::after) {
  width: 0%;
}
:deep(.el-tabs__active-bar) {
  width: 13px !important;
  margin: 0 22px;
}
:deep(.el-tabs__header) {
  margin: 0 0 15px;
  .el-tabs__item {
    font-weight: 600;
  }
  .el-tabs__item:nth-child(2) {
    padding: 0;
  }
  .is-active {
    color: #2d61ee;
  }
}
:deep(.el-tabs .el-tab-pane) {
  @apply h-full;
}
:deep(.el-tabs__content) {
  @apply h-full flex-1;
}
.table-content {
  height: calc(100% - 125px);
}
.common-btn {
  @apply text-sm font-normal text-[#3478F6];
}
.el-tab-pane {
  border-top: 1px solid rgba(247, 247, 247, 1);
}
</style>
